<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="ul"></ul>
    <button onclick="add()">增加</button>
    <script>
        let person = [
            { id: '011', name: '张三', age: 18 },
            { id: '012', name: '李四', age: 8 },
            { id: '013', name: '王五', age: 28 }
        ];
        let ul = document.getElementById('ul');
        let htmlStr = '';
        for (const k of person) {
            htmlStr += `
            <li>--ID:${k.id}--姓名:${k.name}--年龄:${k.age}
                </li>
            `;
        }
        ul.innerHTML = htmlStr;
        function add(params) {
            var one = {id: '014', name: '朱八', age: 36 };
            person.push(one);
            let li2 = document.createElement('li');
            // console.log(person[person.length-1]);
            li2.innerHTML=`
            --ID:${person[person.length-1].id}
            --姓名:${person[person.length-1].name}
            --年龄:${person[person.length-1].age}
            `;
            ul.insertBefore(li2,ul.children[person.length-1])
        }
        
    </script>
</body>

</html>